<template>
    <div>
        <div id="chartSix" ref="chartSix"></div>
        <el-row :gutter="20">
            <el-col :span="12">
                <div style="letter-spacing: 1px font-weight: 900">
                    月结总数：
                    <i style="
                            font-size: 16px;
                            font-weight: 900;
                            color: #ff4040;
                        ">12</i>
                    个
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
    export default {
        name: "echartStorage",
        created() {
            // this.totalAbnormal = this.allData.totalAbnormal;
            // this.layEggCycle = this.allData.layEggCycle;
            // // console.log(this.allData.totalAbnormal)
            // if (this.allData.totalAbnormal === 0) {
            //     //判断是否有异常数据，有再显示
            //     this.haveData = false;
            // } else {
            //     this.haveData = true;
            // }
        },
        mounted() {
            this.initCharts();
        },
        updated() { },
        data() {
            return {

            };
        },
        // props: ["cageCountData","theNum"],
        methods: {
            //设置图表
            initCharts() {
                let that = this;
                // let willTakeEgg = that.cageCountData["将抽蛋"];
                // let willPictureEgg = that.cageCountData["将照蛋"];
                // let takeEgg = that.cageCountData["已抽蛋"];
                // let pictureEgg = that.cageCountData["已照蛋"];
                // let checkChild = that.cageCountData["已查仔"];
                // let noHaveEgg = that.cageCountData["无蛋"];

                // that.totalCage =
                //     willTakeEgg +
                //     willPictureEgg +
                //     takeEgg +
                //     pictureEgg +
                //     checkChild +
                //     noHaveEgg;
                // that.data[0].name = "无蛋";
                // that.data[0].value = 4;
                // that.data[1].name = "将抽蛋";
                // that.data[1].value = 0;
                // that.data[2].name = "已抽蛋";
                // that.data[2].value = 0;
                // that.data[3].name = "将照蛋";
                // that.data[3].value = 0;
                // that.data[4].name = "照蛋";
                // that.data[4].value = 0;
                // that.data[5].name = "已查仔";
                // that.data[5].value = 2;

                // if (that.theNum === 2) { //对数组进行截取，实现不同状态显示不同数据
                //     that.data = that.data.slice(0,1)
                // } else if (that.theNum === 3) {
                //     that.data = that.data.slice(1,4)
                // } else if (that.theNum === 4) {
                //     that.data = that.data.slice(5,6)
                // }

                let chartSix = that.$echarts.init(that.$refs.chartSix);
                //     that.$refs.chartSix.style.width = "200px";
                //    that.$refs.chartSix.height = "300px";
                // console.log(chartSix);
                // let legrndData = [];
                // for (let i = 0; i < this.data.length; i++) {
                //     legrndData.push(this.data[i].name);
                // }
                // console.log("legrndData");
                // console.log(legrndData);
                let option = {
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    tooltip: {
                        trigger: "item",
                    },
                    // legend: {
                    //     top: "5%",
                    //     left: "left",
                    //     orient: "vertical",
                    //     data: legrndData,
                    // },
                    title: [
                        {
                            left: "center",
                            text: "鸽笼状态数量",
                        },
                    ],
                    series: [
                        {
                            data: [120, 200, 150, 80, 70, 110, 130],
                            type: 'bar',
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(180, 180, 180, 0.2)'
                            }
                        }
                    ],
                };
                // console.log(option);
                chartSix.setOption(option);
            },
        },
    };
</script>
<style lang="scss" scoped>
    #chartSix {
        width: 400px;
        height: 300px;
    }
</style>